<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <div class="label">向arkTS传递数据</div>
    <div class="box">
      <div class="content" style="display: flex;flex-direction: column;align-items: flex-end;">
        <input class="h5-input" type="text" placeholder="输入文本" v-model="sendMsg"/>
        <button @click="sendMessage" >发送数据</button>
      </div>
    </div>
    <div class="label">ArkTs传递的数据</div>
    <div class="box">
      <div class="content">
        <p style="font-size: 16;color: #383838;">{{ nativateText }}</p>
      </div>
    </div>
    <div class="label">调用原生接口</div>
    <div class="box">
      <div class="content">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <button @click="showTimePicker">原生时间选择器</button><span v-if="time">选中的时间：{{ time }}</span>
        </div>
        <button @click="showToast">弹出原生Toast</button>
        <button @click="navTo">原生navigation跳转</button>
      </div>
    </div>
  </div>
</template>

<script>
import HMSDK from "@/utils/HMSDK.js";
var h5Port = null;
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      time: '',
      nativateText: '',
      sendMsg:""
    }
  },
  methods: {
    // 这里可以添加方法来处理按钮点击事件
    showToast() {
      HMSDK.HMToast("Hello World");
    },
    showTimePicker() {
      HMSDK.HMTimePicker({
        success: (res) => {
          this.time = res.hour + ':' + res.minute;
        }
      });
    },
    navTo() {
      HMSDK.HMNavigation({
        name: 'NativeNextPage',
        params: {
          key: 'Hello'
        }
      });
    },
    receivedMessage() {
      let that = this
      window.addEventListener('message', function (event) {        
        if (event.data === '__init_port__') {
          if (event.ports[0] !== null) {
            h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
            h5Port.start(); // 
            h5Port.addEventListener('message', function (event) {
              that.nativateText = event.data;
            });
          }
        }
      })
    },
    sendMessage() {
      if (h5Port) {
        h5Port.postMessage(this.sendMsg);
        HMSDK.HMToast("到native页面查看效果");
      } else {
        HMSDK.HMToast("h5Port还没有初始化");
      }
    }
  },
  mounted() {
    this.receivedMessage();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  border: 1px dashed #ccc;
  padding: 10px;  
  margin: 10px;
  min-height: 30px;
  box-sizing: border-box;
}

.label {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  padding: 0 10px;
  margin-top: 20px;
}

.h5-input{
  box-sizing: border-box;
  height: 32px;
  line-height: 32px;
  outline: none;
  padding: 4px;
  font-size: 14;
  border-radius: 4px;
  border: 1px solid #41b883;
  color: #35495e;
  width: 96%;
  margin: 10px;
}
.h5-input:focus{
  border: 1px solid #41b883;
  box-shadow: 0 0 5px rgb(65, 184, 131);
}

button{
  outline: none;
  display: block;
  border: none;
  background: #35495e;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin: 10px;

}
button:active{
  background: #35495e;
}

.content {
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  box-sizing: border-box;
}

h4 {
  margin: 40px 0 0;
}
</style>
